<!-- 页面中的内容 -->

<div class="main-div">
    <form name="main_form" method="POST" action="{:url('add')}">
        <table cellspacing="1" cellpadding="3" width="100%">
			<tr>
				<td class="label">上级分类：</td>
				<td>
					<select name="pid">
						<option value="">顶级分类</option>
						{volist name="cats" id="cat"}
							<option value="{$cat.cid}"><?php echo str_repeat('-----',$cat['level']);?>{$cat.cat_name}</option>
						{/volist}
					</select>
				</td>
			</tr>
            <tr>
                <td class="label">分类名称：</td>
                <td>
                    <input  type="text" name="category_name" value="" />
                </td>
            </tr>
            <tr>
                <td class="label">在导航栏显示：</td>
                <td>
                    <input  type="radio" name="navShow" value="1" />是
                    <input  type="radio" name="navShow" value="0" checked="checked" />否
                </td>
            </tr>
            <tr>
                <td class="label">在分类栏显示：</td>
                <td>
                    <input  type="radio" name="catShow" value="1" checked="checked" />显示
                    <input  type="radio" name="catShow" value="0" />隐藏
                </td>
            </tr>
            <tr>
                <td class="label">筛选属性：</td>
                <td>
	                <ul style="list-style: none;margin:0;padding: 0;">
		                <li>
		                	<a href="javascript:void(0);" onclick="addNew(this);">[+]</a>
		                    <select name="type_id[]">
			                    <option value="">选择类型</option>
			                    {volist name="types" id="type"}
			                    <option value="{$type.tid}">{$type.type_name}</option>
			                    {/volist}
		                    </select>
		                    
		                    <select name="attr_id[]">
		                    	<option value="">选择属性</option>
		                    </select>
		                </li>
	                </ul>
                </td>
            </tr>
            <tr>
                <td class="label">seo关键字：</td>
                <td>
                    <textarea name="keyword" id="" cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td class="label">seo描述：</td>
                <td>
                    <textarea name="desc" id="" cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td class="label">价格区间：</td>
                <td>
                    <input type="text" name="priceNum" value="5" style="width: 30px;text-align: center;" />
                </td>
            </tr>
            <tr>
                <td class="label">排序：</td>
                <td>
                    <input type="text" name="sort" value="0" style="width: 30px;text-align: center;" />
                </td>
            </tr>
            <tr>
                <td colspan="99" align="center">
                    <input type="submit" class="button" value=" 确定 " />
                    <input type="reset" class="button" value=" 重置 " />
                </td>
            </tr>
        </table>
    </form>
</div>
<script>
//异步获取属性
var url = '';//请求地址
var typeId = '';//类型id
var str = '';//拼接字符串变量
$("select[name='type_id[]']").change(function(){

	var _this = $(this);
	str = '<option value="">选择属性</option>';

	// 获取选择的类型的ID
	var typeId = $(this).val();
	var opt = "<option value=''>选择属性</option>";

	// 如果选择了一个类型就执行AJAX取出个类型下的属性
	if(typeId != ""){
		url = "{:url('getAttrs')}";
		$.get(url,{id:typeId},function( data ){

				
			if( data ){

				$(data).each(function(){

					str += '<option value="'+this.aid+'">'+this.attr_name+'</option>';

				});

				
			}

			_this.next('select').html( str );

		},'json');
	}
	else
		_this.next("select").html(opt);
});

//点击"+"号，克隆一行
function addNew(a){

	var li = $(a).parent();

	if($(a).html() == "[+]"){

		var newli = li.clone(true);  // 深度克隆，把标签上的事件也克隆
		newli.find("a").html("[-]");
		var value = $(a).next('select').val();
		newli.find('select').eq(0).val(value);
		li.after(newli);

	}else{

		li.remove();

	}

}
</script>